iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
自我挑戰組

asp.net可以變出那些功能系列 第 25

圖片輪播:極簡風/跳出視窗提示:現代風

  • 分享至 

  • xImage
  •  

圖片輪播:極簡風
https://laihao2.com/Home/Contact16
https://ithelp.ithome.com.tw/upload/images/20241002/20119035yEwwg7a7d3.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡沒有用到資料庫~

Controllers裡面的Entities>

public ActionResult Contact16()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法,它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析:

public ActionResult Contact16()
{
    ViewBag.Message = "Your contact page.";

    return View();
}
  1. public ActionResult Contact16():

    • 這是一個公共方法,名為 Contact16,返回類型為 ActionResult
    • 在 ASP.NET MVC 中,ActionResult 是一個基類,表示控制器動作的結果,它可以是多種類型的響應(例如返回一個視圖、重定向到另一個 URL 等)。
    • 這個方法的名稱通常與特定的 URL 路徑綁定,用戶通過訪問這個路徑來觸發該方法。
  2. ViewBag.Message = "Your contact page.":

    • 這是將一條消息傳遞給視圖的代碼。
    • ViewBag 是 ASP.NET MVC 中的一個動態對象,它用於在控制器和視圖之間傳遞數據。在這個例子中,Message 字段被賦值為 "Your contact page."
    • 這個數據將傳遞到視圖中,可以在視圖模板里訪問 ViewBag.Message 來顯示這條信息。
  3. return View();:

    • 這是返回一個視圖給客戶端的代碼。
    • View() 方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖(在這個例子中,很可能是名為 Contact16.cshtml 的視圖文件)。
    • 視圖負責生成最終返回給客戶端的 HTML 頁面。

總結: 這個方法接收用戶請求,設定一個名為 Message 的字符串變量,然後將該變量傳遞給視圖,用於顯示聯系頁面的相關信息。

產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact16";
}

<div class="farm-wrapper">

    <h3>作品-極簡風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>極簡風網站</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="Content/css/reset.css">
                <link rel="stylesheet" href="Content/css/farm-style.css">
                <style>
                    body {
                        font-family: sans-serif;
                        margin: 0;
                        padding: 0;
                        background-color: #f5f5f5; /* 淡灰色背景 */
                        color: #333; /* 深灰色文字 */
                    }

                    header {
                        text-align: center;
                        padding: 20px;
                    }

                    nav ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    nav li {
                        display: inline-block;
                        margin: 0 10px;
                    }

                    main {
                        padding: 20px;
                    }

                    /* 輪播區域 */
                    .slider {
                        position: relative;
                        width: 100%;
                        max-width: 600px;
                        margin: 20px auto;
                        overflow: hidden;
                        border-radius: 10px;
                    }

                    .slide {
                        display: none;
                        width: 100%;
                    }

                        .slide img {
                            width: 100%;
                            height: auto;
                            display: block;
                        }

                        .slide.active {
                            display: block;
                        }

                    footer {
                        text-align: center;
                        padding: 10px;
                    }


                </style>
            </head>
            <body>
                <header>
                    <h1>我的網站</h1>
                    <nav>
                        <ul>
                            <li><a href="#">首頁</a></li>
                            <li><a href="#">關於</a></li>
                            <li><a href="#">作品</a></li>
                            <li><a href="#">聯絡</a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <section>
                        <h2>關於我們</h2>
                        <p>我們致力於提供高品質的內容和服務,幫助您了解更多有關我們的資訊。</p>
                        <p>我們的網站包含了最新的作品展示、詳細的公司介紹以及方便的聯絡方式。</p>
                    </section>
                    <section>
                        <h2>我們的服務</h2>
                        <p>我們提供多種服務,包括網站設計、品牌策劃、內容創作等。無論您的需求是什麼,我們都有專業的團隊為您提供支持。</p>
                        <ul>
                            <li>網站設計 - 專業的網站設計服務,讓您的品牌更具吸引力。</li>
                            <li>品牌策劃 - 精準的品牌策劃,幫助您在市場上脫穎而出。</li>
                            <li>內容創作 - 高品質的內容創作,提升您的網站曝光率。</li>
                        </ul>
                    </section>
                    <section>
                        <h2>用戶評價</h2>
                        <blockquote>
                            <p>“這個網站提供了非常有用的信息,設計簡潔且易於導航。” - 張三</p>
                        </blockquote>
                        <blockquote>
                            <p>“我非常滿意這裡的服務,專業!” - 李四</p>
                        </blockquote>
                    </section>
                    <section>
                        <h2>最新消息</h2>
                        <article>
                            <h3>新版本發佈</h3>
                            <p>我們剛剛發佈了網站的新版本,包含了更多的功能和改進,歡迎體驗。</p>
                        </article>
                        <article>
                            <h3>即將舉行的活動</h3>
                            <p>我們將於下月舉行一場重要的活動,詳細消息敬請關註我們的網站。</p>
                        </article>
                    </section>


                    <!-- 輪播區域 -->
                    <div class="slider">
                        <div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
                        <div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
                        <div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
                    </div>
                </main>



                <!-- JavaScript 部分 -->
                <script>
                    const slider = document.querySelector('.slider');
                    const slides = slider.querySelectorAll('.slide');
                    let index = 0;

                    function nextSlide() {
                        slides[index].classList.remove('active');
                        index = (index + 1) % slides.length;
                        slides[index].classList.add('active');
                    }

                    // 每 3 秒自動切換
                    setInterval(nextSlide, 3000);


                </script>
            </body>
        </html>

解釋程式碼
這段代碼是 ASP.NET MVC 視圖模板中的 HTML 和 C# 代碼的組合。主要的部分是用來生成一個網頁,具體包括布局定義、標題設置、頁面結構、樣式和 JavaScript 功能。

代碼解析

  1. 布局設置和標題設置

    @{ Layout = "~/Views/Shared/_Layout.cshtml"; }
    @{
        ViewBag.Title = "Contact16";
    }
    
    • Layout 指定了頁面所使用的布局文件,_Layout.cshtml 是一個共享布局模板,通常定義了頁眉、頁腳等通用部分。
    • ViewBag.Title 設置了頁面的標題為 "Contact16",這個值會在布局文件中用來動態顯示頁面的標題。
  2. 頁面內容

    <div class="farm-wrapper">
        <h3>作品-極簡風網站</h3>
        <h3>建置中</h3>
    </div>
    
    • 這是頁面的頂部部分,顯示了 "作品-極簡風網站" 和 "建置中" 這兩個標題,表示網站正在建設中。
  3. HTML 頁面結構

    <html lang="zh-TW">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>極簡風網站</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="Content/css/reset.css">
        <link rel="stylesheet" href="Content/css/farm-style.css">
    
    • 定義了網頁的基礎結構,包括 DOCTYPEmeta 信息(編碼和視口設置)、頁面標題 "極簡風網站",以及引用了外部的 CSS 文件來進行樣式設置。
  4. 內聯樣式表

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5; /* 淡灰色背景 */
            color: #333; /* 深灰色文字 */
        }
        /* 其他樣式略 */
    </style>
    
    • 定義了一些基礎樣式,控制頁面布局和外觀,如背景顏色、字體、頁眉和導航菜單的布局等。
  5. 頁面結構內容

    <body>
        <header>
            <h1>我的網站</h1>
            <nav>
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">關於</a></li>
                    <li><a href="#">作品</a></li>
                    <li><a href="#">聯絡</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <!-- 包含多個段落的展示 -->
        </main>
        <footer>
            <p>&copy; 2024 我的網站</p>
        </footer>
    </body>
    
    • 包括頁眉部分(顯示網站標題 "我的網站" 和導航菜單),主內容部分(包括多個章節如 "關於我們"、"我們的服務"、"用戶評價"、"最新消息"),以及頁腳部分。
  6. 輪播圖功能

    <div class="slider">
        <div class="slide active"><img src="~/templates/deco_left.png" alt="圖片1"></div>
        <div class="slide"><img src="~/templates/deco_right.png" alt="圖片2"></div>
        <div class="slide"><img src="~/templates/webphoto.jpg" alt="圖片3"></div>
    </div>
    
    • 定義了一個輪播圖區域,包含多個圖片(每個圖片放在一個 div.slide 中)。
    • slide.active 類的 div 元素默認顯示,其他 slide 元素最初是隱藏的。
  7. 輪播圖的 JavaScript 邏輯

    <script>
        const slider = document.querySelector('.slider');
        const slides = slider.querySelectorAll('.slide');
        let index = 0;
    
        function nextSlide() {
            slides[index].classList.remove('active');
            index = (index + 1) % slides.length;
            slides[index].classList.add('active');
        }
    
        setInterval(nextSlide, 3000); // 每 3 秒自動切換
    </script>
    
    • 這段 JavaScript 代碼實現了輪播圖的自動切換功能。每 3 秒鐘,當前顯示的圖片會被隱藏,然後顯示下一張圖片。

總結

這段代碼展示了一個極簡風格的網站頁面結構,包括頁面的導航、內容展示和圖片輪播功能。它使用了 HTML、CSS 和 JavaScript 來實現頁面布局和交互效果,同時通過 ASP.NET MVC 的視圖引擎提供動態數據(如頁面標題)。

跳出視窗提示:現代風
https://laihao2.com/Home/Contact17
https://ithelp.ithome.com.tw/upload/images/20241002/20119035OwuKOWFSTN.png

目前畫面上請客戶填入聯絡MAIL是還沒有實際功能,可能後面有

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡沒有用到資料表~

Controllers裡面的Entities>

解釋程式碼
這段代碼是一個 C# 中 ASP.NET MVC 的控制器方法,它處理來自客戶端的請求並返回一個視圖。我們可以逐步解析:

public ActionResult Contact17()
{
    ViewBag.Message = "Your contact page.";

    return View();
}
  1. public ActionResult Contact17():

    • 這是一個公共方法,名為 Contact16,返回類型為 ActionResult
    • 在 ASP.NET MVC 中,ActionResult 是一個基類,表示控制器動作的結果,它可以是多種類型的響應(例如返回一個視圖、重定向到另一個 URL 等)。
    • 這個方法的名稱通常與特定的 URL 路徑綁定,用戶通過訪問這個路徑來觸發該方法。
  2. ViewBag.Message = "Your contact page.":

    • 這是將一條消息傳遞給視圖的代碼。
    • ViewBag 是 ASP.NET MVC 中的一個動態對象,它用於在控制器和視圖之間傳遞數據。在這個例子中,Message 字段被賦值為 "Your contact page."
    • 這個數據將傳遞到視圖中,可以在視圖模板里訪問 ViewBag.Message 來顯示這條信息。
  3. return View();:

    • 這是返回一個視圖給客戶端的代碼。
    • View() 方法告訴 MVC 框架返回與該控制器動作名稱相同的視圖(在這個例子中,很可能是名為 Contact17.cshtml 的視圖文件)。
    • 視圖負責生成最終返回給客戶端的 HTML 頁面。

總結: 這個方法接收用戶請求,設定一個名為 Message 的字符串變量,然後將該變量傳遞給視圖,用於顯示聯系頁面的相關信息。

產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact17";
}

<div class="farm-wrapper">

    <h3>作品-現代風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>現代風網站</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="Content/css/reset.css">
                <link rel="stylesheet" href="Content/css/farm-style.css">
                <style>
                    body {
                        font-family: 'Roboto', sans-serif;
                        margin: 0;
                        padding: 0;
                        line-height: 1.6;
                        background-color: #fafafa;
                    }

                    header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: #333;
                        color: #fff;
                        padding: 20px 40px;
                    }

                        header h1 {
                            font-weight: 700;
                            margin: 0;
                        }

                    nav ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    nav li {
                        display: inline-block;
                        margin: 0 15px;
                    }

                    nav a {
                        color: #fff;
                        text-decoration: none;
                        font-weight: 500;
                        transition: color 0.3s;
                    }

                        nav a:hover {
                            color: #ff6347; /* 橘紅色效果 */
                        }

                    main {
                        padding: 40px;
                        max-width: 1200px;
                        margin: auto;
                    }

                        main h2 {
                            font-size: 2rem;
                            margin-bottom: 20px;
                            color: #333;
                        }

                    footer {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #333;
                        color: #fff;
                        padding: 10px 40px;
                    }

                    header nav {
                        flex: 1;
                        text-align: right;
                    }

                    html {
                        scroll-behavior: smooth;
                    }

                    body.dark-theme {
                        background-color: #333;
                        color: #fff;
                    }

                    header.dark-theme, footer.dark-theme {
                        background-color: #444;
                    }

                    nav a.dark-theme {
                        color: #ddd;
                    }

                        nav a.dark-theme:hover {
                            color: #ff6347;
                        }



                </style>
            </head>
            <body>
                <header>
                    <h1>我的網站</h1>
                    <button id="theme-toggle">切換主題</button>
                    <nav>
                        <ul>
                            <li><a href="#">首頁</a></li>
                            <li><a href="#">關於</a></li>
                            <li><a href="#">產品</a></li>
                            <li><a href="#">聯絡</a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <section>
                        <h2>歡迎來到我的網站</h2>
                        <p>這是一個現代風格的網站範例。我們致力於提供優質的內容和服務,希望您能在這裏找到您所需要的。</p>
                        <p>請瀏覽我們的產品頁面,了解更多關於我們的服務,或者通過聯繫我們的表單與我們取得聯繫。</p>
                    </section>
                    <section>
                        <h2>關於我們</h2>
                        <p>我們是一家創新型公司,專註於提供高品質的產品和服務。我們的團隊擁有豐富的經驗和專業知識,致力於滿足客戶的需求。</p>
                        <p>了解更多關於我們的使命和願景,請訪問我們的 <a href="#">關於</a> 頁面。</p>
                    </section>
                    <section>
                        <h2>我們的產品</h2>
                        <p>我們提供多種高品質的產品,涵蓋多個領域。每一種產品都經過嚴格的測試和篩選,以確保最佳性能和可靠性。</p>
                        <ul>
                            <li><strong>產品1:</strong>簡短的描述。</li>

                        </ul>
                        <p>訪問我們的 <a href="#">產品</a> 頁面,了解更多內容。</p>
                    </section>
                    <section>
                        <h2>客戶評價</h2>
                        <blockquote>
                            <p>“這是一家非常值得信賴的公司,產品非常出色!”</p>
                            <footer>- 張三</footer>
                        </blockquote>
                        <blockquote>
                            <p>“他們的服務非常專業,我非常滿意!”</p>
                            <footer>- 里斯</footer>
                        </blockquote>
                    </section>
                    <section>
                        <h2>常見問題解答</h2>
                        <h3>我們如何聯繫支持團隊?</h3>
                        <p>您可以通過 <a href="#">聯繫我們</a> 頁面獲取支持。</p>

                    </section>
                    <section>
                        <h2>最新動態</h2>
                        <article>
                            <h3>標題1</h3>
                            <p>簡短的新聞內容。</p>
                            <a href="#">閱讀更多</a>
                        </article>

                    </section>
                    <section>
                        <h2>聯繫我們</h2>
                        <p>如果您有任何問題或建議,請隨時通過以下方式與我們聯繫:</p>
                        <address>
                            <p>地址: 1234 例子街, 城市, 國家</p>
                            <p>電話: (123) 456-7890</p>
                            <p>電子郵件: <a href="#">jzs2home@hotmail.com</a></p>
                        </address>
                    </section>


                </main>
                <form id="contact-form">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" required>
                    <br>
                    <label for="email">電子郵件:</label>
                    <input type="email" id="email" name="email" required>
                    <br>
                    <button type="submit">送出</button>
                </form>



                <!-- JavaScript 部分 -->
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        alert('歡迎來到我的網站!');
                    });
                    document.addEventListener('DOMContentLoaded', () => {
                        const themeToggleButton = document.getElementById('theme-toggle');

                        themeToggleButton.addEventListener('click', () => {
                            document.body.classList.toggle('dark-theme');
                        });
                    });
                    document.getElementById('contact-form').addEventListener('submit', (event) => {
                        const name = document.getElementById('name').value;
                        const email = document.getElementById('email').value;

                        if (name === '' || email === '') {
                            alert('所有欄位都是必填的!');
                            event.preventDefault(); // 防止表單提交
                        }
                    });

                </script>
            </body>
        </html>

解釋程式碼
這段代碼是 ASP.NET MVC 視圖文件中的 HTML 和 C# 代碼的組合,生成了一個“現代風格”的網頁,提供了多種功能和頁面內容。下面逐步解析代碼的各個部分:

1. 布局和標題設置

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact17";
}
  • Layout:定義該視圖使用共享的布局文件 _Layout.cshtml,這個文件通常包含網站的通用結構,比如頁眉、頁腳等。
  • ViewBag.Title:設置頁面的標題為“Contact17”,這個會影響頁面的 <title> 標簽,通常會出現在瀏覽器標簽欄。

2. 頁面結構

<div class="farm-wrapper">
    <h3>作品-現代風網站</h3>
    <h3>建置中</h3>
</div>
  • 這個部分展示了“作品-現代風網站”和“建置中”的標題,表明該頁面展示的是一個現代風格的網站,可能尚在建設中。

3. HTML頁面結構

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>現代風網站</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="Content/css/reset.css">
    <link rel="stylesheet" href="Content/css/farm-style.css">
  • HTML 結構:設置了頁面的基礎結構,如 charsetviewport(自適應布局)、頁面標題“現代風網站”。
  • 外部樣式表:通過 <link> 標簽引用了多個外部 CSS 文件,負責頁面的樣式設計。

4. 內聯樣式

<style>
    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1.6;
        background-color: #fafafa;
    }
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        color: #fff;
        padding: 20px 40px;
    }
    /* 其他樣式省略 */
</style>
  • 基本樣式:定義了頁面的整體外觀,如 body 的字體、背景顏色、行高、頁眉的布局、導航欄的樣式等。
  • 深色主題支持:通過 body.dark-themeheader.dark-theme 類,支持深色模式,當用戶切換到深色主題時,頁面的背景顏色和文字顏色會發生變化。

5. 頁面內容

<body>
    <header>
        <h1>我的網站</h1>
        <button id="theme-toggle">切換主題</button>
        <nav>
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">產品</a></li>
                <li><a href="#">聯絡</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>歡迎來到我的網站</h2>
            <p>這是一個現代風格的網站範例。</p>
        </section>
        <!-- 其他段落內容省略 -->
    </main>
  • Header:包含了一個網站標題“我的網站”,一個按鈕用於切換主題,以及導航欄鏈接到不同的頁面(首頁、關於、產品、聯系等)。
  • Main:頁面的主要內容區域,包含了多個 section,每個部分展示了不同的內容,例如歡迎信息、關於我們、產品介紹、客戶評價、常見問題等。

6. 表單處理

<form id="contact-form">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">送出</button>
</form>
  • 這是一個簡單的聯系表單,用戶需要填寫姓名和電子郵件地址,並通過提交按鈕發送表單。

7. JavaScript 交互

document.addEventListener('DOMContentLoaded', () => {
    alert('歡迎來到我的網站!');
});
document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle');

    themeToggleButton.addEventListener('click', () => {
        document.body.classList.toggle('dark-theme');
    });
});
document.getElementById('contact-form').addEventListener('submit', (event) => {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    if (name === '' || email === '') {
        alert('所有欄位都是必填的!');
        event.preventDefault(); // 防止表單提交
    }
});
  • 歡迎彈窗:當頁面加載完成時,彈出一個歡迎提示框。
  • 主題切換:通過點擊“切換主題”按鈕,頁面可以在深色和淺色主題之間切換。
  • 表單驗證:在表單提交前,檢查 nameemail 字段是否為空,若為空則彈出提示並阻止表單提交。

總結

這段代碼生成了一個現代風格的網站模板,包含響應式設計、主題切換、表單驗證等功能。HTML、CSS 和 JavaScript 的結合使得頁面具有良好的視覺效果和用戶交互性,同時通過 ASP.NET MVC 模板引擎動態生成頁面內容。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
要寫很多及BUTTON選取:出差申請單
下一篇
現在很流行的VUE
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言